<template>
<div id="adress">
  <div class="hot_city">
    <div class="city-index-title">
      热门城市
    </div>
    <div class="city_details">
      <ul>
        <li @click="city('广州')">广州</li>
        <li @click="city('深圳')">深圳</li>
        <li @click="city('上海')">上海</li>
        <li @click="city('北京')">北京</li>
      </ul>
    </div>
  </div>
  <div class="index_list">
    <mt-index-list>
      <!-- <mt-index-section v-for="(i,p) in my_city" :index="p"> -->
				<mt-index-section v-for="item in all_index" :index="item">
        <div v-for="list in all_add" @click="city(list.name)">
					<!-- <div v-for="list in i" @click="city(list.name)"> -->
          <mt-cell :title="list.name" v-if="list.pinyin[0]==item"></mt-cell>
        </div>
      </mt-index-section>
    </mt-index-list>
  </div>
</div>
</template>

<script>
import axios from "axios";
export default {
  created: function() {
    var that = this;
    axios.get('http://m.maizuo.com/v4/api/city')
      .then(function(res) {
        that.all_add = res.data.data.cities;
        var obj = {};
        var city = res.data.data.cities;
        city.forEach(function(item, index) {
          var p = item.pinyin[0];
          //对象["属性的字符窜"]同样可以访问对象的这个属性
          //既然是可以传字符窜，那么可以动态访问对象上得属性是否存在
          if (obj[p] == undefined) {
            //判断如果obj里面没有首字母，那么久给他同一个空数组
            obj[p] = [];
          }
          //给对应的属性(分类)，添加城市
          obj[p].push(item);
        })

        var newArr = [];
        newArr = Object.keys(obj).sort();
        var newObj = {};
        for (var i = 0; i < newArr.length; i++) {
          //给新对象按照顺序添加属性，并且用已经分好组的旧对象上获取值
          //newArr[0]=="A"
          newObj[newArr[i]] = obj[newArr[i]];
        }
        //newArr排序后的数组
        // Object.keys(obj)
        //    console.log(that.all_add.pinyin);
				that.my_city = newObj;
      })

  },
  data: function() {
    return {
      my_city:{},
      all_add: "",
      all_index: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
    }
  },
  methods: {
    //			format: function(time) {
    //				var time = new Date(time);
    //				return(time.getMonth() + 1) + "月" + time.getDate() + "日";
    //			}
    city: function(city) {
      this.$store.commit("CityTitle", city)
      this.$router.push({
        path: "/home",
      })
    }
  }
}
</script>

<style lang="scss">
@import "../scss/adress.scss"
</style>
